葫芦的运维日志_cssjshtml

浏览量 4528

2018/12/27 16:53

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>counter</title>
    <style>
        #cavans {
            border: 1px solid #333;
            text-align: center;
            width: 400px;
            height: 250px;
        }
    </style>
</head>
<div id="app">
    <div id="cavans" @mousemove="updatexy">
        {{x}},{{y}}
    </div>
</div>
<script src="/static/js/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            x: 0,
            y: 0
        },
        methods: {
            updatexy: function (event) {
                this.x=event.offsetX;
                this.y=event.offsetY;
            }

        }

    })
</script>
</html>

葫芦的运维日志

打赏